<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="onload" style="display: none">正在处理中，请稍后...</div>
    省：<select name="" id="provinice"></select>
    市：<select name="" id="city"></select>
    县：<select name="" id="town"></select>
  </body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  window.onload = function () {
    $.ajax({
      type: "get", //请求方法，get | post | put | delete...
      url: "http://192.168.50.70/api.php?id=0", //请求的接口地址
      data: null, //请求时提交的数据，get时为空，post将数据填充在请求体中
      dataType: "json", //期望服务器返回的数据类型 例：json | xml | js | text | html...
      beforeSend() {
        // 发送请求之前的处理函数，例如ajax请求时的超时动画
        $(".onload").show();
      },
      success(response) {
        // ajax响应成功后的处理函数。形参response，即服务器返回的数据
        console.log(response);
        $(".onload").hide();
        let str = "<option>请选择..</option>";
        for (let item of response.data) {
          str += `<option data-id=${item.id}>${item.name}</option>`;
        }
        $("#provinice").html(str);
        $("#provinice").on("change", () => {
          let id = $("#provinice option:checked").attr("data-id");
          console.log(id);
          $.ajax({
            type: "get", //请求方法，get | post | put | delete...
            url: "http://192.168.50.70/api.php?id=" + id, //请求的接口地址
            data: null, //请求时提交的数据，get时为空，post将数据填充在请求体中
            dataType: "json",
            success(response) {
              let str = "<option>请选择..</option>";
              for (let item of response.data) {
                str += `<option data-id=${item.id}>${item.name}</option>`;
              }
              $("#city").html(str);
              $("#city").on("change", () => {
          let id = $("#city option:checked").attr("data-id");
          console.log(id);
          $.ajax({
            type: "get", //请求方法，get | post | put | delete...
            url: "http://192.168.50.70/api.php?id=" + id, //请求的接口地址
            data: null, //请求时提交的数据，get时为空，post将数据填充在请求体中
            dataType: "json",
            success(response) {
              let str = "<option>请选择..</option>";
              for (let item of response.data) {
                str += `<option data-id=${item.id}>${item.name}</option>`;
              }
              $("#town").html(str);
              $
            },
          });
        });
            },
          });
        });
      },
      error(err) {
        // ajax失败后的处理函数
        console.log(err);
      },
    });

    /*// get简化写法
        $.get("http://192.168.50.70/api.php?id=0",(data)=>{
            console.log(data);
        }) */
  };
</script>
